<template>
  <div class="box">
    <!-- 头部 -->
    <div class="box-hd">
      <h2 class="title-div">
        <span>费用明细列表</span>
      </h2>
    </div>
    <!-- 内容区 -->
    <div class="box-bd p30">
      <!-- 筛选条件 -->
      <div class="search-box">
        <el-button icon="el-icon-search" size="small">筛选</el-button>
      </div>
      <!-- 列表数据 -->
      <div class="list-box">
        <el-table :data="tableData" max-height="500px" stripe class="table-list" v-loading="loading">
          <el-table-column prop="date" label="发生日期" :formatter="dateFormatter"></el-table-column>
          <el-table-column prop="typeMenu.name" label="费用类型"></el-table-column>
          <el-table-column prop="money" label="费用金额"></el-table-column>
          <el-table-column prop="customer.customerName" label="所属客户"></el-table-column>
          <el-table-column prop="task" label="关联任务">
            <template slot-scope="scope">
              {{ taskOptions[scope.row.invoice].title }}
            </template>
          </el-table-column>
          <el-table-column label="有无发票">
            <template slot-scope="scope">
              {{ scope.row.invoice == 0 ? '无' : '有' }}
            </template>
          </el-table-column>
          <el-table-column prop="reimbursementDate" label="上报日期"></el-table-column>
        </el-table>
        <el-pagination
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchData.currentPage"
          :page-sizes="[15, 25, 30, 50]"
          :page-size="searchData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.size">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { findList } from '@/api/fee-detail'
import { dateFormat } from '@/utils/index'
export default {
  data() {
    return {
      activeIndex: 0,
      companyId: this.$store.state.user.companyId,
      tableData: [],
      taskOptions: [
        {
          val: '0',
          title: '计划分派'
        },
        {
          val: '1',
          title: '临时任务'
        },
        {
          val: '2',
          title: '自主安排'
        }
      ],
      loading: false,
      searchData: {
        contractType: '',
        currentPage: 1,
        pageSize: 15
      }
    }
  },
  mounted() {
    this.initTableData()
  },
  methods: {
    initTableData() {
      this.loading = true
      findList(this.companyId).then(res => {
        this.tableData = res.data.data
        this.loading = false
      })
    },
    dateFormatter(row) {
      return dateFormat(row.date)
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.searchData.currentPage = 1
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.searchData.currentPage = val
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.box-bd{
  .side-bar{
    padding: 25px;
  }
  .table-list{
    margin-bottom: 15px;
  }
  .list-box{
    li{
      height: 30px;
      line-height: 30px;
    }
  }
}
.tab-nav{
  margin-bottom: 15px;
  margin-left: 100px;
  li{
    float: left;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
    margin: 0 25px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    &.active{
      border-bottom-color: #1989fa;
      color: #1989fa;
    }
  }
}
</style>
